<script setup lang="ts">
import {
  Cartesian3,
  UrlTemplateImageryProvider,
  Viewer,
} from 'cesium'
import { onMounted } from 'vue'

onMounted(() => {
  const viewer = new Viewer('cesiumContainer', {
    // 搜索按钮
    geocoder: false,
    // 主页按钮
    homeButton: false,
    // 投影按钮
    sceneModePicker: false,
    // 图层选择按钮
    baseLayerPicker: false,
    // 帮助按钮
    navigationHelpButton: false,
    // 动画控件
    animation: false,
    // 时间线控件
    timeline: false,
    // 全屏按钮
    fullscreenButton: false,
    // 去掉版本
    creditContainer: document.createElement('div'),
    // 去掉星空背景
    skyBox: false,
    baseLayer: false,
  })

  // 服务负载子域
  const subdomains = ['1', '2', '3', '4']

  // 高德影像底图
  const gaodeImageryProvider = new UrlTemplateImageryProvider({
    url: 'https://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&style=6',
    subdomains: subdomains,
  })
  viewer.imageryLayers.addImageryProvider(gaodeImageryProvider)
  //
  // const gaodeImageryProvider2 = new UrlTemplateImageryProvider({
  //   url: 'https://webst01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&style=8',
  //   subdomains: subdomains,
  // })
  // viewer.imageryLayers.addImageryProvider(gaodeImageryProvider2)

  // 高德矢量底图
  // const gaodeImageryProvider = new UrlTemplateImageryProvider({
  //   url: 'https://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&style=7&scl=2',
  //   subdomains: subdomains,
  // })
  // viewer.imageryLayers.addImageryProvider(gaodeImageryProvider)

  // webrd0[1-4].is.autonavi.com 专注矢量底图，路网和注记
  // const gaodeImageryProvider = new UrlTemplateImageryProvider({
  //   url: 'https://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&style=8',
  //   subdomains: subdomains,
  // })
  // viewer.imageryLayers.addImageryProvider(gaodeImageryProvider)

  // webrd0[1-4].is.autonavi.com 专注矢量底图，scl=2 只有路网没有注记
  // const gaodeImageryProvider = new UrlTemplateImageryProvider({
  //   url: 'https://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&style=8&scl=2',
  //   subdomains: subdomains,
  // })
  // viewer.imageryLayers.addImageryProvider(gaodeImageryProvider)

  viewer.camera.flyTo({
    destination: Cartesian3.fromDegrees(103.84, 31.15, 17850000),
  })
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style scoped></style>
